<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="myTeamItem" @click="toTeam()">
		<view class="myTeamItem-head flex-row-center">
			<view class="head-left flex-row-center">
				<image src="/static/group/myTeam_icon.png" class="myTeam_icon" mode=""></image>
				<text class="team-name">{{groupInfo.title}}</text>
			</view>
			<!-- 状态 -->
			<text class="team-state">{{groupInfo.status_memo}}</text>
		</view>
		<!-- 内容 -->
		<view class="myTeamItem-content flex-row-center">
			<image :src="groupInfo.imageList[0]" class="myTeamItem-img" mode="aspectFill"></image>
			<view class="myTeamItem-info">
				<view class="price-box">
					<text class="icon">￥</text>
					<text class="price">{{groupInfo.cost}}</text>
					<text class="unit">/人</text>
				</view>
				<!-- 座位情况 -->
				<!-- <text class="seating">{{groupInfo.describe}}</text> -->
				<text class="seating">座位情况：{{groupInfo.join_number}}/{{groupInfo.number_people}}</text>
				<view class="statistics-box flex-row-center">
					<view class="register-box flex-row-center">
						<!-- <up-avatar-group :urls="urls" size="36rpx" gap="0.4"></up-avatar-group> -->
						<text class="user-num">{{groupInfo.join_number}}</text>
						<text class="text">人已报名</text>
					</view>
					<!-- 	<text class="interval"></text>
					<view class="address-box flex-row-center">
						<up-icon name="map" color="#606264" size="22rpx"></up-icon>
						<text class="distance">{{groupInfo.juli}}km</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 操作 -->
		<!-- ============一、我发布-============== -->
		<template v-if="groupInfo.is_store==1">
			<!-- --------未开始/进行中--------- -->
			<template v-if="groupInfo.status_memo==='未开始'||groupInfo.status_memo==='进行中'">
				<view class="option-box flex-center" v-if="groupInfo.number_people!=groupInfo.join_number">
					<view class="option-btn flex-center" @click.stop="cancelGroup">
						<text class="text">取消队伍</text>
					</view>
				</view>
			</template>

			<!-- --------- 已结束 --------- -->
			<view class="option-box flex-center" v-if="groupInfo.status_memo==='已结束'">
				<view class="option-btn flex-center " v-if="groupInfo.confirm==1">
					<text class="text">已确认</text>
				</view>
				<view class="option-btn flex-center" @click.stop="toConfirm" v-else>
					<text class="writeOff-text">确认组队</text>
				</view>
			</view>
		</template>
		<!--  -->
		<view class="option-box flex-center" v-else-if="groupInfo.status_memo==='未开始'||groupInfo.status_memo==='进行中'">
			<view v-if="groupInfo.status===1" class="option-btn flex-center ">
				<text class="writeOff-text">已核销</text>
			</view>
			<view v-else class="option-btn flex-center " @click.stop="writeOff">
				<text class="writeOff-text">核销</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		$Api
	} from '../../api';
	const props = defineProps({
		groupInfo: {
			default: {}
		},
		typeIndex: {
			default: 0
		}
	});
	const groupInfo = ref(computed(() => props.groupInfo));
	const typeIndex = computed(() => props.typeIndex);
	const emit = defineEmits(['writeOffOpen', 'restList']);
	const refundTap = () => { //退款
		uni.showModal({
			title: '提示',
			content: '确定退款该组队？',
			success: function(res) {
				if (res.confirm) {
					cancelGroupuser();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const writeOff = async () => { //打开核销
		uni.scanCode({
			scanType: ['qrCode'],
			success: async (res) => {
				const ress = await $Api.store.writeOff({
					verification_code: res.result
				}, true);
				if (ress.code == 1) {
					groupInfo.value.status = 1
					uni.showToast({
						title: '核销成功！'
					})
				} else {
					uni.$u.toast(ress.msg);
				}
			},
			fail: (err) => {
				uni.$u.toast('识别失败');
			}
		})
	}
	const toTeam = (id) => { //去队伍详情
		console.log('toitem');
		uni.navigateTo({
			url: '/page_main/views/teamDetails?id=' + groupInfo.value.t_id
		})
	}
	const toPay = () => { //去付款
		uni.navigateTo({
			url: '/page_main/views/paymentTeam?id=' + groupInfo.value.t_id
		})
	}
	const cancelGroup = () => { //取消组队
		uni.showModal({
			title: '提示',
			content: '确定取消该组队？',
			success: async (res) => {
				if (res.confirm) {
					cancelGroupcaptain();
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
	}
	const toConfirm = async () => { //确认组队
		uni.showModal({
			title: '提示',
			content: '请确认所有队员已完成核销，再确认结束组队？',
			success: async (res) => {
				if (res.confirm) {
					const res = await $Api.group.confirmEnd({
						id: groupInfo.value.t_id
					})
					if (res.code == 1) {
						uni.showToast({
							title: '确认成功'
						});
						groupInfo.value.confirm = 1;
						// 重置列表
						// setTimeout(() => {
						// 	emit('restList', {
						// 		type: 1,
						// 		id: groupInfo.value.t_id
						// 	})
						// }, 800)
					} else {
						uni.$u.toast(res.msg);
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const cancelGroupuser = async () => { //用户退款组队
		const ress = await $Api.group.getWriteOff({
			id: groupInfo.value.t_id
		}, true);
		if (ress.code == 1) {
			const res = await $Api.group.cancelGroup({
				id: ress.data.ut_id
			}, true);
			if (res.code == 1) {
				uni.showToast({
					title: '退款成功！'
				});
				// 重置列表
				setTimeout(() => {
					emit('restList', {
						type: 1,
						id: groupInfo.value.t_id
					})
				}, 800)
			} else {
				uni.$u.toast(res.msg);
			}
		} else {
			uni.$u.toast(ress.msg);
		}
	}
	const cancelGroupcaptain = async () => { //队长取消组队
		const res = await $Api.group.captainCancelGroup({
			id: groupInfo.value.t_id
		}, true);
		if (res.code == 1) {
			uni.showToast({
				title: '取消成功！'
			});
			// 重置列表
			setTimeout(() => {
				emit('restList', {
					type: 1,
					id: groupInfo.value.t_id
				})
			}, 800)
		} else {
			uni.$u.toast(res.msg);
		}
	}
</script>

<style lang="scss" scoped>
	.myTeamItem {
		width: 100%;
		// min-height: 396rpx;
		background: #222528;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 20rpx 0 20rpx;

		.myTeamItem-head {
			justify-content: space-between;

			.myTeam_icon {
				width: 52rpx;
				height: 52rpx;
				margin-right: 12rpx;
			}

			.team-name {
				width: 300rpx;
				font-weight: bold;
				font-size: 34rpx;
				// color: #E2E3E3;
				color: $name-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.team-state {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}

		.myTeamItem-content {
			margin: 12rpx 0;
			padding-bottom: 20rpx;

			.myTeamItem-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				margin-right: 32rpx;
				flex-shrink: 0;
			}

			.myTeamItem-info {
				.price-box {
					color: $price-color;
					margin-bottom: 8rpx;

					.icon {
						font-size: 30rpx;
						// color: #7FDBC2;
					}

					.price {
						font-size: 30rpx;
						// color: #7FDBC2;
					}

					.unit {
						font-size: 16rpx;
						// color: #7FDBC2;
					}
				}

				.seating {
					font-weight: bold;
					font-size: 30rpx;
					// color: rgba(255, 255, 255, 0.87);
					color: $name-color;
					line-height: 35rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}

				.statistics-box {
					margin-top: 16rpx;

					.register-box {
						font-weight: bold;
						font-size: 24rpx;

						.text {
							color: $description-color;
						}

						.user-num {
							margin-left: 8rpx;
							// color: #CDB254;
							color: $num-text-color;
						}
					}

					.interval {
						width: 2rpx;
						height: 16rpx;
						background: #FFFFFF;
						opacity: 0.3;
						margin: 0 8rpx;
					}

					.distance {
						font-weight: 500;
						font-size: 24rpx;
						// color: #606264;
						color: $distance-color;
						margin-left: 6rpx;
					}
				}
			}
		}

		.option-box {
			width: 100%;
			border-top: 2rpx solid #2F3235;
			height: 80rpx;

			.option-btn {
				width: 50%;
				height: 100%;
				box-sizing: border-box;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #848687;
				}

				.writeOff-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #99D19A;
				}
			}

			.borderR {
				border-right: 2rpx solid #2F3235;
			}

			.borderL {
				border-left: 2rpx solid #2F3235;
			}
		}
	}
</style>